<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG clipPath</title>
</head>

<body>
    <p>
        <clipPath>标记的作用相当于一个蒙版，它能限制哪些地方可见，哪些地方不可见。<clipPath>标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).
    </p>
    <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <defs>
            <clipPath id="myClip">
                <circle cx="30" cy="30" r="20" />
                <circle cx="70" cy="70" r="30" />
            </clipPath>
        </defs>

        <rect x="10" y="10" width="100" height="100" clip-path="url(#myClip)" fill='red' />

    </svg>
</body>

</html>